<template>
    <!-- 首页 -->
    <div class="Index">
        <div class="state-gif"></div>
        <div class="ready-check">
            <div>
                <span class="text-1">自动接收对局</span>
                <span class=""><el-switch v-model="readyValue" @change="readyChange"></el-switch></span>
            </div>
        </div>
        <div class="role-option">
            <div>
                <span class="text-1">选择英雄</span>
                <span class=""><el-cascader v-model="roleValue" :options="options" :props="{ expandTrigger: 'hover' }"
                        :show-all-levels="false" filterable @change="roleIdChange"></el-cascader></span>
            </div>
        </div>
        <!-- 测试按钮 -->
        <!-- <el-button @click="a()">aa</el-button> -->
        <!-- <div>{{ abc }}</div> -->
    </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
// import axios from 'axios'
export default {
    name: 'Index',
    data() {
        return {
            abc: '00',
            // 用于首页显示的状态
            wathState: '',
            userState: '',
            userInfo: {},
            // 自动接受对局开关
            readyValue: true,
            // 英雄id
            roleValue: -1,
            // 英雄数组
            options: [{ "value": -1, "label": "无" }, { "value": 1, "label": "黑暗之女" }, { "value": 2, "label": "狂战士" }, { "value": 3, "label": "正义巨像" }, { "value": 4, "label": "卡牌大师" }, { "value": 5, "label": "德邦总管" }, { "value": 6, "label": "无畏战车" }, { "value": 7, "label": "诡术妖姬" }, { "value": 8, "label": "猩红收割者" }, { "value": 9, "label": "远古恐惧" }, { "value": 10, "label": "正义天使" }, { "value": 11, "label": "无极剑圣" }, { "value": 12, "label": "牛头酋长" }, { "value": 13, "label": "符文法师" }, { "value": 14, "label": "亡灵战神" }, { "value": 15, "label": "战争女神" }, { "value": 16, "label": "众星之子" }, { "value": 17, "label": "迅捷斥候" }, { "value": 18, "label": "麦林炮手" }, { "value": 19, "label": "祖安怒兽" }, { "value": 20, "label": "雪原双子" }, { "value": 21, "label": "赏金猎人" }, { "value": 22, "label": "寒冰射手" }, { "value": 23, "label": "蛮族之王" }, { "value": 24, "label": "武器大师" }, { "value": 25, "label": "堕落天使" }, { "value": 26, "label": "时光守护者" }, { "value": 27, "label": "炼金术士" }, { "value": 28, "label": "痛苦之拥" }, { "value": 29, "label": "瘟疫之源" }, { "value": 30, "label": "死亡颂唱者" }, { "value": 31, "label": "虚空恐惧" }, { "value": 32, "label": "殇之木乃伊" }, { "value": 33, "label": "披甲龙龟" }, { "value": 34, "label": "冰晶凤凰" }, { "value": 35, "label": "恶魔小丑" }, { "value": 36, "label": "祖安狂人" }, { "value": 37, "label": "琴瑟仙女" }, { "value": 38, "label": "虚空行者" }, { "value": 39, "label": "刀锋舞者" }, { "value": 40, "label": "风暴之怒" }, { "value": 41, "label": "海洋之灾" }, { "value": 42, "label": "英勇投弹手" }, { "value": 43, "label": "天启者" }, { "value": 44, "label": "瓦洛兰之盾" }, { "value": 45, "label": "邪恶小法师" }, { "value": 48, "label": "巨魔之王" }, { "value": 50, "label": "诺克萨斯统领" }, { "value": 51, "label": "皮城女警" }, { "value": 53, "label": "蒸汽机器人" }, { "value": 54, "label": "熔岩巨兽" }, { "value": 55, "label": "不祥之刃" }, { "value": 56, "label": "永恒梦魇" }, { "value": 57, "label": "扭曲树精" }, { "value": 58, "label": "荒漠屠夫" }, { "value": 59, "label": "德玛西亚皇子" }, { "value": 60, "label": "蜘蛛女皇" }, { "value": 61, "label": "发条魔灵" }, { "value": 62, "label": "齐天大圣" }, { "value": 63, "label": "复仇焰魂" }, { "value": 64, "label": "盲僧" }, { "value": 67, "label": "暗夜猎手" }, { "value": 68, "label": "机械公敌" }, { "value": 69, "label": "魔蛇之拥" }, { "value": 72, "label": "上古领主" }, { "value": 74, "label": "大发明家" }, { "value": 75, "label": "沙漠死神" }, { "value": 76, "label": "狂野女猎手" }, { "value": 77, "label": "兽灵行者" }, { "value": 78, "label": "圣锤之毅" }, { "value": 79, "label": "酒桶" }, { "value": 80, "label": "不屈之枪" }, { "value": 81, "label": "探险家" }, { "value": 82, "label": "铁铠冥魂" }, { "value": 83, "label": "牧魂人" }, { "value": 84, "label": "离群之刺" }, { "value": 85, "label": "狂暴之心" }, { "value": 86, "label": "德玛西亚之力" }, { "value": 89, "label": "曙光女神" }, { "value": 90, "label": "虚空先知" }, { "value": 91, "label": "刀锋之影" }, { "value": 92, "label": "放逐之刃" }, { "value": 96, "label": "深渊巨口" }, { "value": 98, "label": "暮光之眼" }, { "value": 99, "label": "光辉女郎" }, { "value": 101, "label": "远古巫灵" }, { "value": 102, "label": "龙血武姬" }, { "value": 103, "label": "九尾妖狐" }, { "value": 104, "label": "法外狂徒" }, { "value": 105, "label": "潮汐海灵" }, { "value": 106, "label": "不灭狂雷" }, { "value": 107, "label": "傲之追猎者" }, { "value": 110, "label": "惩戒之箭" }, { "value": 111, "label": "深海泰坦" }, { "value": 112, "label": "机械先驱" }, { "value": 113, "label": "北地之怒" }, { "value": 114, "label": "无双剑姬" }, { "value": 115, "label": "爆破鬼才" }, { "value": 117, "label": "仙灵女巫" }, { "value": 119, "label": "荣耀行刑官" }, { "value": 120, "label": "战争之影" }, { "value": 121, "label": "虚空掠夺者" }, { "value": 122, "label": "诺克萨斯之手" }, { "value": 126, "label": "未来守护者" }, { "value": 127, "label": "冰霜女巫" }, { "value": 131, "label": "皎月女神" }, { "value": 133, "label": "德玛西亚之翼" }, { "value": 134, "label": "暗黑元首" }, { "value": 136, "label": "铸星龙王" }, { "value": 141, "label": "影流之镰" }, { "value": 142, "label": "暮光星灵" }, { "value": 143, "label": "荆棘之兴" }, { "value": 145, "label": "虚空之女" }, { "value": 147, "label": "星籁歌姬" }, { "value": 150, "label": "迷失之牙" }, { "value": 154, "label": "生化魔人" }, { "value": 157, "label": "疾风剑豪" }, { "value": 161, "label": "虚空之眼" }, { "value": 163, "label": "岩雀" }, { "value": 164, "label": "青钢影" }, { "value": 166, "label": "影哨" }, { "value": 200, "label": "虚空女皇" }, { "value": 201, "label": "弗雷尔卓德之心" }, { "value": 202, "label": "戏命师" }, { "value": 203, "label": "永猎双子" }, { "value": 221, "label": "祖安花火" }, { "value": 222, "label": "暴走萝莉" }, { "value": 223, "label": "河流之王" }, { "value": 233, "label": "狂厄蔷薇" }, { "value": 234, "label": "破败之王" }, { "value": 235, "label": "涤魂圣枪" }, { "value": 236, "label": "圣枪游侠" }, { "value": 238, "label": "影流之主" }, { "value": 240, "label": "暴怒骑士" }, { "value": 245, "label": "时间刺客" }, { "value": 246, "label": "元素女皇" }, { "value": 254, "label": "皮城执法官" }, { "value": 266, "label": "暗裔剑魔" }, { "value": 267, "label": "唤潮鲛姬" }, { "value": 268, "label": "沙漠皇帝" }, { "value": 350, "label": "魔法猫咪" }, { "value": 360, "label": "沙漠玫瑰" }, { "value": 412, "label": "魂锁典狱长" }, { "value": 420, "label": "海兽祭司" }, { "value": 421, "label": "虚空遁地兽" }, { "value": 427, "label": "翠神" }, { "value": 429, "label": "复仇之矛" }, { "value": 432, "label": "星界游神" }, { "value": 497, "label": "幻翎" }, { "value": 498, "label": "逆羽" }, { "value": 516, "label": "山隐之焰" }, { "value": 517, "label": "解脱者" }, { "value": 518, "label": "万花通灵" }, { "value": 523, "label": "残月之肃" }, { "value": 526, "label": "镕铁少女" }, { "value": 555, "label": "血港鬼影" }, { "value": 711, "label": "愁云使者" }, { "value": 777, "label": "封魔剑魂" }, { "value": 875, "label": "腕豪" }, { "value": 876, "label": "含羞蓓蕾" }, { "value": 887, "label": "灵罗娃娃" }, { "value": 888, "label": "炼金男爵" }, { "value": 895, "label": "不羁之悦" }, { "value": 897, "label": "纳祖芒荣耀" }, { "value": 901, "label": "炽炎雏龙" }, { "value": 902, "label": "明烛" }, { "value": 910, "label": "异画师" }, { "value": 950, "label": "百裂冥犬" }]
        };
    },
    watch: {
    },
    created() {
        this.getPlayerState()
    },
    methods: {
        ...mapGetters(['getStoreClientState', 'getStoreUserState', 'getStoreReadyValue', 'getStoreRoleValue']),
        ...mapMutations(['setStoreReadyValue', 'setStoreRoleValue']),
        // 测试方法
        // async a() {
        //     const res = await axios({
        //         method: 'get',
        //         url: 'http://127.0.0.1:8033/getAbc',
        //     })
        //     this.abc = res.data
        // },
        // 获取玩家实时状态
        getPlayerState() {
            switch (this.getStoreUserState()) {
                case 'None':
                    this.wathState = '等待开始游戏'
                    break;
                case 'Lobby':
                    this.wathState = '等待开始游戏'
                    break;
                case 'Matchmaking':
                    this.wathState = '寻找对局中'
                    break;
                case 'ReadyCheck':
                    this.wathState = '等待接收对局'
                    break;
                case 'ChampSelect':
                    this.wathState = '选择英雄中'
                    break;
                case 'InProgress':
                    this.wathState = '正在加载对局'
                    break;
                case 'PreEndOfGame':
                    this.wathState = '结束点赞'
                    break;
                // 额外添加的状态,后端发送请求错误时返回offline
                case 'offline':
                    this.wathState = '游戏未运行'
                    break;
                default:
                    this.wathState = '游戏中'
                    break;
            }
            setTimeout(() => {
                this.getPlayerState()
            }, 1000);
        },
        readyChange() {
            this.setStoreReadyValue(this.readyValue)
        },
        // 选择英雄框
        roleIdChange() {
            this.roleValue = this.roleValue[0]
            this.setStoreRoleValue(this.roleValue)
        },
    }
}
</script>

<style>
.state-gif {
    height: 100px;
    /* background-color: red; */
}

.ready-check {
    height: 65px;
    padding: 35px 40px 0 42px;
}

.ready-check div {
    display: flex;
    justify-content: space-between;
    height: 31px;
}

.text-1 {
    margin-top: 3.5px;
    font-size: 16px;
    color: #000;
}

.role-option {
    height: 66px;
    padding: 34px 40px 0 42px;
}

.role-option div {
    display: flex;
    justify-content: space-between;
    height: 32px;
}

.role-option .el-input__inner {
    width: 161px;
    height: 32px;
}

.role-option .el-input__suffix {
    top: -3px;
}
</style>